

<style type="text/css">
    .sqj-preview
    {
        position: absolute;
        top: 90px;
        left: 0;
        z-index: 300; /* make sure its in front */
    }
    #network_preview {
        width:150px;
        height:80px;
        background-color: aliceblue;
        border: solid 1px blue;
    }
    #network_diagram{
        width:100%;
        height:100%;
    }
</style>

{block name="main"}
<div style="position: relative;">
    <form class="form-inline" method="post" style="height: 50px;">
        <div class="form-group col-xs-4">
            <label class="control-label col-xs-4">会员名称：</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" name="mobile"
                       placeholder="请输入会员名称">
            </div>
        </div>
        <div class="form-group col-xs-4">
            <label class="control-label col-xs-4">显示层级：</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" name="level"
                       placeholder="请输入显示的层级">
            </div>
        </div>
        <div class="form-group col-xs-4">
            <button type="submit" class="btn btn-success">
                <i class="fa fa-search"></i>
                搜索
            </button>
        </div>
    </form>

<!--    <div class="row" style="margin-bottom: 10px;">
        <div class="col-xs-4" style="text-align: left; line-height: 34px;">
            当前最高显示层级为【{$level}】层！
        </div>
    </div>-->
    <div id="network_diagram" style="background-color: white; width: 100%; height: 400px;magrin-top:1000px;"></div>
    <div class="sqj-preview">
        <div id="network_preview"></div>
        <div class="row">
            <div class="col-xs-12">
                <button type="button" class="btn btn-info btn-block btn-xs" id="btn_zoom">
                    <i></i>
                    查看全部
                </button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<link rel="stylesheet" href="/static/admin/js/gojs/app.v1.css">
<script src="/static/common/js/jquery.2.1.1.min.js?v=212"></script>
<script src="/static/admin/js/gojs/go.js?v=1324"></script>
<!--推荐网络图-->
<script type="application/javascript">
    //
    var goJs = go.GraphObject.make;
    // 网络图
    var network;
    // 网络图类型
    var networkType = '{$type}';

    // 初始化网络图
    function initNetwork()
    {
        // 角度
        var angle = networkType === '1' ? 90 : 0;
        // 网络图
        network = goJs(go.Diagram, "network_diagram", {
            initialAutoScale: go.Diagram.UniformToFill,
            allowCopy: false,
            initialDocumentSpot: go.Spot.Center,
            initialViewportSpot: go.Spot.Center,
            // 创建模板
            layout:
                goJs(go.TreeLayout, {
                    angle: angle,
                    nodeSpacing: 10,
                    layerSpacing: 40
                })
        });

        // 网络图预览
        var networkPreview = goJs(go.Overview, "network_preview", {
            observed: network,
            contentAlignment: go.Spot.Center
        });

        // 初始化模板
        if (networkType === '1')
        {
            initNetworkTemplate();

            // 自定义选择器
            defineTools();
        }
        else
        {
            initTreeTemplate();
        }
    }

    // 初始化模板
    function initNetworkTemplate() {
        // 定义节点模板
        network.nodeTemplate = goJs(go.Node, "Auto",
            // 定义节点底图
            goJs(go.Shape, "Rectangle",
                {
                    stroke: null,
                    strokeWidth: 0
                },
                // 根据激活状态自定义节点底色
                new go.Binding("fill", "is_active", activeStatusBrushConverter)
            ),
            // 定义表格内容
            goJs(go.Panel, "Table",
                {
                    margin: 0,
                    maxSize: new go.Size(250, NaN)
                },
                // 名称
                goJs(go.Panel, "Auto",
                    { row: 0, column: 0, columnSpan: 2, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, new go.Binding("text", "mobile"))
                ),
                // 用户等级
                goJs(go.Panel, "Auto",
                    { row: 1, column: 0, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, '用户等级')
                ),
                goJs(go.Panel, "Auto",
                    { row: 1, column: 1, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, new go.Binding("text", "level_name"))
                ),
                // 左边业绩
    /*            goJs(go.Panel, "Auto",
                    { row: 2, column: 0, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, '左列业绩')
                ),
                goJs(go.Panel, "Auto",
                    { row: 2, column: 1, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, new go.Binding("text", "leftuse"))
                ),
                // 右边业绩
                goJs(go.Panel, "Auto",
                    { row: 3, column: 0, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, '右列业绩')
                ),
                goJs(go.Panel, "Auto",
                    { row: 3, column: 1, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, new go.Binding("text", "rightuse"))
                ),*/
                //个人业绩
   /*             goJs(go.Panel, "Auto",
                    { row: 4, column: 0, columnSpan: 1, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, "个人业绩")
                ),*/
/*                goJs(go.Panel, "Auto",
                    { row: 4, column: 1, columnSpan: 1, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, new go.Binding("text", "myuse"))
                ),*/
                // 当前层数
                goJs(go.Panel, "Auto",
                    { row: 5, column: 0, columnSpan: 2, stretch: go.GraphObject.Horizontal },
                    goJs(go.Shape, "Rectangle", { fill: null }),
                    goJs(go.TextBlock, {margin: 6}, new go.Binding("text", "floor"))
                )
            )
        );

        // 定义连接线模板
        network.linkTemplate = goJs(go.Link, go.Link.Orthogonal,
            {
                corner: 5,
                selectable: false
            },
            goJs(go.Shape, {
                strokeWidth: 2,
                stroke: "#424242"
            })
        );
    }

    // 初始化模板
    function initTreeTemplate() {
        // 定义节点模板
        network.nodeTemplate = goJs(go.Node, "Horizontal",
            {
                selectionChanged: nodeSelectionChanged
            },  // this event handler is defined below
            goJs(go.Panel, "Auto",
                goJs(go.Shape,
                    {stroke: null},
                    new go.Binding("fill", "is_active", activeStatusBrushConverter)
                ),
                // 定义表格内容
                goJs(go.TextBlock,
                    { font: "bold 13px Helvetica, bold Arial, sans-serif",
                        stroke: "white", margin: 3 },
                    new go.Binding("text", "user_name")
                )
            ),
            goJs("TreeExpanderButton")
        );

        // Define a trivial link template with no arrowhead.
        network.linkTemplate = goJs(go.Link,
            {
                selectable: false
            },
            goJs(go.Shape));  // the link shape
    };

    // 自定义网络工具
    function defineTools() {
        // 获得选择工具
        var tool = network.toolManager.clickSelectingTool;

        // 自定义选择操作
        tool.standardMouseSelect = function() {
            var diagram = tool.diagram;
            var e = diagram.lastInput;

            // 获取选中的节点
            var node = diagram.findPartAt(e.documentPoint, false);

            if (node != null)
            {
                var data = node.data;

                // 跳转到指定用户的节点处
                location.href = '?mobile=' + data.mobile+'&id='+data.id;
            }

            // otherwise, call the base functionality
            go.ClickSelectingTool.prototype.standardMouseSelect.call(tool);
        };
    };

    // 设置网络数据
    function setNetworkData(data) {

        data=data.replace(/&quot;/g,'"');
        //console.log(data)
        // 解析网络数据
        var nodeDataArray = JSON.parse(data);

        // 设置数据模型
        network.model =new go.TreeModel(nodeDataArray);

        network.scale = 1;
        network.scrollToRect(network.findNodeForKey(0).actualBounds);
    }

    // 激活状态渲染
    function activeStatusBrushConverter(status)
    {
        // 已激活
        if (status == 1)
        {
            return '#93CE93';
        }
        else
        {
            return '#E48D8A';
        }
    }

    // 节点选择状态发生变化
    function nodeSelectionChanged(node)
    {
        if (node.isSelected)
        {
            names[node.data.name].style.backgroundColor = "lightblue";
        }
        else
        {
            names[node.data.name].style.backgroundColor = "";
        }
    }

    // 立即注册
    function register(e, obj) {
        var node = obj.part;
        var data = node.data;
        if (data) {
            location.href = module.registerUrl + '?user_code=' + data.user_code;
        }
    }

    $(function () {

        // 初始化网络图
        initNetwork();

        // 设置网络图数据
        setNetworkData('{$network}');

        // 绑定缩放事件
        $('#btn_zoom').bind('click', function () {
            location.href = "{:url('chart/bindex')}";

            // network.zoomToFit();
        });
    });
</script>
{/block}